Skip to content

Conversation

@JHWelch
Copy link
Contributor

@JHWelch JHWelch commented Oct 22, 2025

Fixes #329

Adding a specific page on rending components, breaking down the getDom and getTemplate approaches.

Open to any suggestions!

One thing I've noticed is that there is no syntax highlighting for Nunjucks. Not sure if there is a straight forward fix for this, but I poked around and couldn't find anything.

The syntax is close enough to twig, so we could use that, but then obviously the language tag in the upper right is incorrect.

CleanShot 2025-10-21 at 20 34 29@2x CleanShot 2025-10-21 at 20 35 31@2x

@JHWelch JHWelch changed the title Add rendering page Add "Rendering Component" page Oct 22, 2025
Copy link
Contributor

@KristjanESPERANTO KristjanESPERANTO left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just a nitpick.

If `getDom` is not overridden, MagicMirror will try and render a
[Nunjucks](https://mozilla.github.io/nunjucks/) template from `getTemplate`.

Nunjucks is a templating language for Javascript. You can read more about the
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Javascript -> JavaScript

@KristjanESPERANTO
Copy link
Contributor

KristjanESPERANTO commented Oct 22, 2025

I like this addition. Thank you! 🙂

About the syntax highlighting: I would stick with nunjucks.

An additional thought on this: I wonder a little whether it would make sense to recommend the getDom method, even if it is perhaps a little more complicated.

Two reasons:

  • Learning effect: What you learn in the process can be applied to other projects. It is rather unlikely that you will encounter Nunjucks anywhere else in another modern project. However, it certainly doesn't hurt to familiarize yourself with the concept of a templating system.
  • Future: Nunjucks seems to me to be a project that Mozilla has abandoned without further development from a community. Will it still be compatible in five years, or will we perhaps even have to remove it from the core at some point?

I researched active alternatives, but everything I found would entail breaking changes. Currently, there isn't really a problem, but I suspect that one will arise in the long term. The last Nunjucks release was in 2023 – maybe I'm painting too early a picture of the devil on the wall here 😈

@JHWelch
Copy link
Contributor Author

JHWelch commented Oct 25, 2025

@KristjanESPERANTO Fixed that casing!

And good question, we're definitely in a bit of a pickle on how we'd ever remove it.

I feel like unless it gets officially deprecated, we shouldn't add anything telling folks to not use it.

Personally, I always use the templates, as I find imperatively building out a frontend to be pretty tedious. Honestly, when I realized I could use templates is probably when I got the most into building modules! So I've always appreciated that it was there.

Maybe in the long run it should be up to modules to BYOT (bring your own templating), but that could increase the size of modules.

It does seem there is still some current interest in the project, and they are right now actively bumping dependencies and working on things, but who knows the future there.

But as long as it is there, I'll be championing declarative frontends!

Copy link
Contributor

@KristjanESPERANTO KristjanESPERANTO left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice. Thank you! About Nunjucks: Yes, it's probably best to just wait and see 🙂

@KristjanESPERANTO KristjanESPERANTO merged commit cde7572 into MagicMirrorOrg:master Oct 25, 2025
@JHWelch JHWelch deleted the add-rendering-page branch October 25, 2025 16:17
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Documentation Page Needed on Frontend/Nunjucks/Templating

2 participants